<template>
  <div id="div-1" class="bg-slate-200">
    <a-typography-paragraph class="absolute z-10 right-6 top-2/4" id="f-div">
      <a-typography-paragraph class="bg-white p-1 rounded-md" id="f-div-1">
        <a-typography-link href="#" id="atl1">
          <RotateLeftOutlined class="text-3xl text-gray-600" id="f-icon-1"/>
        </a-typography-link>
      </a-typography-paragraph>
      <a-typography-paragraph class="mt-4 bg-white p-1 rounded-md" id="f-div-2">
        <a-typography-link href="#" id="atl2">
          <WechatOutlined class="text-3xl text-gray-600" id="f-icon-2"/>
        </a-typography-link>
      </a-typography-paragraph>
    </a-typography-paragraph>
    <a-typography-paragraph id="div-2" class="relative flex items-center  ">
      <a-image :src="indexImage" width="100%" id="banner" :preview='false'></a-image>
      <a-typography-paragraph class="w-2/5 absolute left-60" id="div-2-1">
        <a-typography-paragraph id="div-2-atp1">
          <a-typography-title id="div-2-att1" level="3" class="!text-white bg-red-500 inline-block p-2 rounded-md">立创•地正星</a-typography-title>
        </a-typography-paragraph>
        <a-typography-paragraph id="div-2-atp2">
          <a-typography-title id="div-2-att2" level="3" class="!text-gray-700">MSPMOL1306开发板</a-typography-title>
        </a-typography-paragraph>
        <a-typography-paragraph id="div-2-atp3">板载MSPMOL1306微控制器核心，其芯片的易用性再加上开发板的快速原型开发，是选择TI寒道的必备利器，是成为电赛黑马的理想选择。</a-typography-paragraph>
        <a-typography-paragraph id="div-2-atp4" class="mt-6">
          <a-typography-link id="div-2-atl" class="bg-red-500 p-2 !text-white">立即抢购</a-typography-link>
        </a-typography-paragraph>
      </a-typography-paragraph>
      <a-typography-paragraph class="absolute bottom-0 flex !m-0 gap-1 w-full justify-center items-center  h-24" id="div-2-2">
        <a-typography-paragraph :key="index" v-for="(item, index) in 5" :id="`div-2-2-atp${index}`" class="inline-block !m-0 h-2 rounded-full" :class="index == 3 ? 'w-6 bg-white': 'w-2 bg-gray-400'"></a-typography-paragraph>
      </a-typography-paragraph>
    </a-typography-paragraph>
    <a-typography-paragraph class="pt-6 justify-center flex px-20" id="div-3">
      <a-list id="list" :grid="{ gutter: 0, column: 4 }" :data-source="list">
        <template #renderItem="{ item, index }">
          <a-list-item :id="`item-${index}`" class="!px-2">
            <a-typography-link href="#" :id="`item-atl-${index}`">
              <a-card :bordered="false" :id="`card-${index}`" class="!min-h-[320px] pt-4 px-4">
                <a-typography-paragraph class="flex justify-center !m-0" :id="`card-div1-${index}`">
                  <a-image :src="item.image" :id="`card-div-img-${index}`" width="100%" class="max-h-56" :preview="false"></a-image>
                </a-typography-paragraph>
                <a-typography-paragraph class="!my-2" :id="`card-div2-${index}`">
                  <a-typography-text :id="`card-div2-att-${index}`" strong :ellipsis="true">{{ item.name }}</a-typography-text>
                </a-typography-paragraph>
                <a-typography-paragraph class="min-h-6 !my-0" :id="`card-div3-${index}`">
                  <a-typography-text :id="`card-div3-att-${index}`" strong class="text-red-600 text-xl">{{ item.price }}</a-typography-text>
                </a-typography-paragraph>
                <a-typography-paragraph class="!my-2 min-h-6" :id="`card-div4-${index}`" v-show="item.describe != ''"><a-tag :id="`card-div4-at-${index}`" color="red">{{ item.describe }}</a-tag></a-typography-paragraph>
              </a-card>
            </a-typography-link>
          </a-list-item>
        </template>
      </a-list>
    </a-typography-paragraph>
  </div>
</template>
<script setup>
const indexImage = "https://picsum.photos/id/25/1080/300";

const list = [
  {
    image: 'https://picsum.photos/id/0/248/172',
    name: '立的•泰山派RK3566-LinuX井友板1',
    price: '128元优惠',
    describe: ''
  },
  {
    image: 'https://picsum.photos/id/1/248/172',
    name: '立创•天猛星MSPM0G3507开发板',
    price: '助力电赛39.9元',
    describe: ''
  },
  {
    image: 'https://picsum.photos/id/2/248/172',
    name: '立创•庐山派K230-CanMV开发板',
    price: '助力电赛168元优惠',
    describe: ''
  },
  {
    image: 'https://picsum.photos/id/3/248/172',
    name: '立创•梁山派-GD32F470ZGT6才及放',
    price: '¥108',
    describe: '学生可免费申请'
  },
  {
    image: 'https://picsum.photos/id/4/248/172',
    name: '立创•逻辑派FPGA-G1开发板',
    price: '首发138元优惠',
    describe: ''
  },
  {
    image: 'https://picsum.photos/id/5/248/172',
    name: '立创•实战派ESP32-S3开发板',
    price: '¥148',
    describe: ''
  },
  {
    image: 'https://picsum.photos/id/6/248/172',
    name: '立创•实战派ESP32-C3开发板',
    price: '¥128',
    describe: ''
  },
  {
    image: 'https://picsum.photos/id/7/248/172',
    name: '立创•衡山派D133EBS开发板',
    price: '¥68',
    describe: ''
  },
  {
    image: 'https://picsum.photos/id/8/248/172',
    name: '立创•天空星STM32F407VET6开发',
    price: '¥39.9',
    describe: ''
  },
  {
    image: 'https://picsum.photos/id/9/248/172',
    name: '立创•地猛星MSPMOG3507开发板',
    price: '¥39.9',
    describe: ''
  },
  {
    image: 'https://picsum.photos/id/10/248/172',
    name: '立创•ColorEasyDuino开发板-幸运色',
    price: '¥39.9',
    describe: ''
  },
  {
    image: 'https://picsum.photos/id/11/248/172',
    name: '立创•ESP32S3R8N8开发板',
    price: '¥35.9',
    describe: ''
  },
  {
    image: 'https://picsum.photos/id/12/248/172',
    name: '立创•地正星-MSPMOL1306开发板',
    price: '¥29.9',
    describe: ''
  },
  {
    image: 'https://picsum.photos/id/13/248/172',
    name: '立创•地阔星STM32F103C8T6开发板',
    price: '¥11.46',
    describe: ''
  },
  {
    image: 'https://picsum.photos/id/14/248/172',
    name: '立创•地文星CW32F030C8T6开发板',
    price: '¥9.9',
    describe: ''
  },
  {
    image: 'https://picsum.photos/id/15/248/172',
    name: '立创•GD32E230C8T6开发板',
    price: '¥9.9',
    describe: ''
  },
  {
    image: 'https://picsum.photos/id/16/248/172',
    name: '立创DAPLINK调试工具扩展板',
    price: '¥49.9',
    describe: '天空星扩展板'
  },
  {
    image: 'https://picsum.photos/id/17/248/172',
    name: '立创10.1寸31Pin MIPI显示触摸屏',
    price: '¥158',
    describe: '立创10.1MIPI显示触摸屏总成'
  },
  {
    image: 'https://picsum.photos/id/18/248/172',
    name: '泰山派底部4G HUB20 ET100 HS',
    price: '¥56',
    describe: '泰山派底部网口扩展板'
  },
  {
    image: 'https://picsum.photos/id/19/248/172',
    name: '立创•梁山派-43寸RGB屏幕扩展板',
    price: '¥98',
    describe: '梁山派扩展板'
  },
  {
    image: 'https://picsum.photos/id/20/248/172',
    name: '立创•梁山派-游戏机扩展板',
    price: '¥36',
    describe: '梁山派扩展板'
  },
  {
    image: 'https://picsum.photos/id/21/248/172',
    name: '立创•梁山派-示波器扩展板',
    price: '',
    describe: '梁山派扩展板'
  },
  {
    image: 'https://picsum.photos/id/22/248/172',
    name: '立创•梁山派-智能小车扩展板',
    price: '',
    describe: '梁山派扩展板'
  },
  {
    image: 'https://picsum.photos/id/23/248/172',
    name: '立创•梁山派-屏幕扩展板',
    price: '',
    describe: '梁山派扩展板'
  },
  {
    image: 'https://picsum.photos/id/24/248/172',
    name: '立创•梁山派-交通灯扩展板',
    price: '',
    describe: '梁山派扩展板'
  },
]

</script>
<style scoped></style>
